import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { IState, IListItem } from '../../store/reducer'
import { Table, Button, Select, Divider } from 'antd'
const App: React.FC = () => {
	const list = useSelector((state: IState) => state.list)
	const [dataList, setDataList] = useState<IListItem[]>([]);
	const [activeIndex, setActiveIndex] = useState(0)
	const [type, setType] = useState('默认');
	const [check, setCheck] = useState(false);
	const [value, setValue] = useState([])
	const descList = ['默认', '时间', '喜欢', '收藏'];

	const columns = [{
		key: 'title',
		dataIndex: 'title',
		title: '标题'
	}, {
		key: 'url',
		dataIndex: 'url',
		title: '图片',
		render(url: string) {
			return <img src={url} />
		}
	}, {
		key: 'pick',
		dataIndex: 'pick',
		title: '是否精选',
		render(pick: boolean) {
			return pick ? '是' : '否'
		}
	}, {
		key: 'type',
		dataIndex: 'type',
		title: '类型',
		render(arr: any) {
			return <div>{arr.map((v: any) => v.name).join('|')}</div>
		}
	}, {
		key: 'createAt',
		dataIndex: 'createAt',
		title: '创建时间'
	}, {
		key: 'like',
		dataIndex: 'like',
		title: '赞'
	}, {
		key: 'collect',
		dataIndex: 'collect',
		title: '收藏'
	}]

	const handleChange = (values: any) => {
		setValue(values)
	}

	useEffect(() => {
		const copyList = [...list]
		let middList: IListItem[] = []

		if (type === '默认') {
			middList = copyList
		}
		if (type === '时间') {
			middList = copyList.sort((a, b) => {
				return +new Date(a.createAt) - +new Date(b.createAt)
			})
		}
		if (type === '喜欢') {
			middList = copyList.sort((a, b) => {
				return b.like - a.like
			})
		}
		if (type === '收藏') {
			middList = copyList.sort((a, b) => {
				return b.collect - a.collect
			})
		}

		if (check) {
			middList = middList.filter(v => v.pick)
		}
		// value： ['1', '2', '3']
		middList = middList.filter(v => {
			return value.every(item => v.type.some(v => v.name.includes(item)))
		})

		setDataList(middList)

	}, [type, check, value])

	return (
		<div>
			<div>
				<Select
					mode="multiple"
					style={{ width: 500 }}
					onChange={handleChange}
					dropdownRender={(menu) => {
						return <div>
							<Button onClick={ () => setActiveIndex(0) }>1</Button>
							<Button onClick={ () => setActiveIndex(1) }>2</Button>
							<Button onClick={ () => setActiveIndex(2) }>3</Button>
							<Divider></Divider>
							{menu}
						</div>
					}}
				>
					{ activeIndex === 0 &&  <Select.Option value="综合" key={1}>综合</Select.Option> }
					<Select.Option value="热门" key={2}>热门</Select.Option>
					{ activeIndex === 1 &&	<Select.Option value="推荐" key={3}>推荐</Select.Option> }
					<Select.Option value="哈哈" key={4}>哈哈</Select.Option>
				</Select>
			</div>
			<div style={{ display: 'flex' }}>
				<b>排序</b>
				<div>
					{
						descList.map((v, i) => {
							return <Button key={i} onClick={() => setType(v)}>{v}</Button>
						})
					}
				</div>
			</div>
			<div>
				<b>是否精选</b>
				<input type="checkbox" checked={check} onChange={e => setCheck(e.target.checked)} />
			</div>
			<Table dataSource={dataList} columns={columns}></Table>
		</div>
	)
}

export default App	